/*
 * @Author: wuqiang
 * @Date: 2023-07-13 12:50:34
 * @LastEditors: wuqiang
 * @LastEditTime: 2023-11-15 23:42:24
 */
import React, { memo, useRef } from 'react'
import { ic_close } from '@/utils/loadImages'

import '../index.scss'

const Applicant = memo((props: any) => {
  const { applicant, setApplicant } = props;

  const clear = key => {
    return () => setApplicant({ ...applicant, [key]: '' })
  }

  const focus = e => {
    e?.target?.querySelector('input')?.focus()
  }

  return (
    <div className="form">
      <div className="form_item">
        <label className="form_label">姓名:</label>
        <div className="form_input">
          <input
            placeholder="请输入投保人姓名"
            value={applicant.name || ''}
            onChange={(e: any) => {
              setApplicant({ ...applicant, name: e.target.value.trim() })
            }}
          />
        </div>
        <span className="form_clear">
          {applicant?.name ? <img src={ic_close} alt="" onClick={clear('name')} /> : null}
        </span>
      </div>

      <div className="form_item">
        <label className="form_label">身份证号:</label>
        <div className="form_input">
          <input
            placeholder="请输入投保人身份证号"
            value={applicant.idNo || ''}
            onChange={(e: any) => {
              setApplicant({ ...applicant, idNo: e.target.value.trim() })
            }}
          />
        </div>
        <span className="form_clear">
          {applicant?.idNo ? <img src={ic_close} alt="" onClick={clear('idNo')} /> : null}
        </span>
      </div>

      <div className="form_item">
        <label className="form_label">手机号:</label>
        <div className="form_input">
          <input
            placeholder="请输入投保人手机号"
            value={applicant.mobile || ''}
            onChange={(e: any) => {
              setApplicant({ ...applicant, mobile: e.target.value.trim() })
            }}
          />
        </div>
        <span className="form_clear">
          {applicant?.mobile ? <img src={ic_close} alt="" onClick={clear('mobile')} /> : null}
        </span>
      </div>
    </div>
  )
})

export default Applicant
